<template>
	<view>
		<view class="cu-bar bg-blue search fixed">
			<view class="action"></view>
			<view class="content">发现</view>
			<view class="action"><text @click="toSearchPage" class="cuIcon-search"></text></view>
		</view>
		<scroll-view scroll-x class="bg-white nav text-center scroll-tab">
			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabItems"
				:key="index" @tap="tabSelect" :data-id="index">{{item}}</view>
		</scroll-view>
		<!-- <view class="padding text-center text-gray" v-if="imagesDailyRank.length === 0">暂时没有排行数据......</view>
		<view v-else class="bg-white text-center text-black padding">图片日排行榜</view> -->
		<view v-show="TabCur===0">
			<view v-if="imagesDailyRank.length === 0" class="padding text-center text-gray"> 没有任何内容......
			</view>
			<view class="cu-card case no-card margin-tb-sm" @click="toImageDetails(item.id)"
				v-for="(item, index) in imagesDailyRank" :key="index">
				<view class="cu-item shadow">
					<view class="image">
						<image :src="item.url" mode="aspectFill" class="main-image"></image>
						<view class="cu-tag bg-blue">top{{ index + 1 }}</view>
						<view class="cu-bar bg-shadeBottom">
							<text class="text-cut">{{ item.description }}</text>
						</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg"
								:style="'background-image:url(' + item.creator.avatar + ');'">
							</view>
							<view class="content flex-sub">
								<view class="text-grey">{{ item.creator.nickname }}</view>
								<view class="text-gray text-sm flex justify-between">
									{{ item.createTime }}
									<view class="text-gray text-sm">
										<text class="cuIcon-attentionfill margin-lr-xs"></text>
										{{ item.views }}
										<text class="cuIcon-appreciatefill margin-lr-xs"></text>
										{{ item.likes }}
										<text class="cuIcon-messagefill margin-lr-xs"></text>
										{{ item.comments }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-show="TabCur===1">
			<view v-if="followedImagesPageInfo.records.length === 0" class="padding text-center text-gray"> 没有任何内容......
			</view>
			<view class="cu-card case no-card margin-tb-sm" @click="toImageDetails(item.id)"
				v-for="(item, index) in followedImagesPageInfo.records" :key="index">
				<view class="cu-item shadow">
					<view class="image">
						<image :src="item.url" mode="aspectFill" class="main-image"></image>
						<view class="cu-bar bg-shadeBottom">
							<text class="text-cut">{{ item.description }}</text>
						</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg"
								:style="'background-image:url(' + item.creator.avatar + ');'"></view>
							<view class="content flex-sub">
								<view class="text-grey">{{ item.creator.nickname }}</view>
								<view class="text-gray text-sm flex justify-between">
									{{ item.createTime }}
									<view class="text-gray text-sm">
										<text class="cuIcon-attentionfill margin-lr-xs"></text>
										{{ item.views }}
										<text class="cuIcon-appreciatefill margin-lr-xs"></text>
										{{ item.likes }}
										<text class="cuIcon-messagefill margin-lr-xs"></text>
										{{ item.comments }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		checkTokenInStore
	} from '../../permission/index';
	import {
		mapState
	} from 'vuex';
	import {
		fetchImageDailyRankApi,
		getFollowedUsersImages
	} from '../../api/http';
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				imagesDailyRank: [],
				tabItems: ['日榜', "关注"],
				followedImagesPageInfo: {
					current: 1,
					size: 5,
					records: [],
					total: 0
				},
				showNoMore: false
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.userInfo
			})
		},
		onLoad() {
			checkTokenInStore();
		},
		onShow() {
			fetchImageDailyRankApi().then(res => {
				this.imagesDailyRank = res.data;
			});
			this.refreshFollowedUsersImages();
		},
		onPullDownRefresh() {
			fetchImageDailyRankApi().then(res => {
				this.imagesDailyRank = res.data;
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			if (this.followedImagesPageInfo.current * this.followedImagesPageInfo.size >= this.followedImagesPageInfo
				.total) {
				this.showNoMore = true;
				return;
			}
			this.fetchFollowedUsersImages({
				page: this.followedImagesPageInfo.current + 1,
				limit: this.followedImagesPageInfo.size,
				userId: this.userInfo.id
			});
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			fetchFollowedUsersImages(params) {
				getFollowedUsersImages(params).then(res => {
					const _info = res.data;
					this.followedImagesPageInfo.current = _info.current;
					this.followedImagesPageInfo.size = _info.size;
					this.followedImagesPageInfo.records = this.followedImagesPageInfo.records.concat(_info
						.records);
					this.followedImagesPageInfo.total = _info.total;
				});
			},
			refreshFollowedUsersImages() {
				this.followedImagesPageInfo = {
					current: 1,
					size: 5,
					records: [],
					total: 0
				};
				this.fetchFollowedUsersImages({
					page: this.followedImagesPageInfo.current,
					limit: this.followedImagesPageInfo.size,
					userId: this.userInfo.id
				});
			},
			toImageDetails(id) {
				uni.navigateTo({
					url: '../image_details/image_details?id=' + id
				});
			},
			toSearchPage() {
				uni.navigateTo({
					url: '../search/search'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.scroll-tab {
		margin-top: 100rpx;
	}
</style>
